<template>
<div>
    <div class="head">
        <el-row>
            <el-col :span="3">数据库总数：{{this.dataProcess.length}}</el-col>
            <el-col :span='21'>
                <div class="button">
                    <el-button type="success" plain @click="upload()">上传数据库</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="body">
        <el-table :data="dataProcess" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
            <el-table-column fixed prop="id" label="记录编号" :index="indexMethod" width="150"></el-table-column>
            <el-table-column prop="file_name" label="文件名" width="200"></el-table-column>
            <el-table-column prop="type" label="类型" :formatter="formatType"
            :filter-method="filterHandler" 
            :filter-multiple="false" 
            :filters="[{ text: '输入', value: '1' }, { text: '输出', value: '2' }]"
             width="200"> </el-table-column>
            <el-table-column prop="uptime" label="文件上传时间" width="200"></el-table-column>
            <el-table-column prop="sort" label="数据处理" :formatter="formatSort"
            :filter-method="filterHandler" 
            :filter-multiple="false" 
           :filters="[{ text: 'Python', value: '0' }, { text: 'C/C++', value: '1' },{ text: 'java', value: '2' }]"
            ></el-table-column>
            <el-table-column align="right">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-dialog title="数据库信息" :modal=false :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-card class="box-card">
                                <div class="infinite-list" v-infinite-scroll="load">
                                    <el-row>
                                        <el-col :span="7">数据库类型</el-col>
                                        <el-col :span="2">:</el-col>
                                        <el-col :span="10">
                                            <template v-if='!modform'>
                                                <template v-if="form.type==1">输入</template>
                                                <template v-else>输出</template>
                                            </template>
                                            <template v-else>
                                                <el-select v-model="form.type" placeholder="请选择类型">
                                                    <el-option v-for="item in dataType" :key="item.id" :label="item.value" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="7">数据库语言</el-col>
                                        <el-col :span="2">:</el-col>
                                        <el-col :span="10">
                                            <template v-if='!modform'>
                                                <template v-if="form.sort==0">Python</template>
                                                <template v-else-if="form.sort==1">C/C++</template>
                                                <template v-else>java</template>
                                            </template>

                                            <template v-else>
                                                <el-select v-model="form.sort" placeholder="请选择语言">
                                                    <el-option v-for="item in dataLangType" :key="item.id" :label="item.value" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="7">数据库文件名</el-col>
                                        <el-col :span="2">:</el-col>
                                        <el-col :span="10">
                                            <template v-if='!modform'>{{form.filename}}</template>
                                            <template v-else>
                                                <el-input v-model="form.filename"></el-input>
                                            </template>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="7">数据库上传时间</el-col>
                                        <el-col :span="2">:</el-col>
                                        <el-col :span="10">
                                            <template v-if='!modform'>{{form.uptime}}</template>
                                            <template v-else>
                                                <el-input v-model="form.uptime" disabled></el-input>
                                            </template>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <template v-if="!modform">
                                <el-button type="primary" @click="modform =true">点击修改</el-button>
                            </template>
                            <template v-else>
                                <el-button type="primary" @click="saveModform()">保存修改</el-button>
                            </template>
                            <el-button @click="dialogFormVisible = false">返回</el-button>
                        </div>
                    </el-dialog>
                    <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog title="数据库文件" :modal=false :visible.sync="dataFormVisibleUpload">
        <el-form :model="uploadform" :inline="true" class="demo-form-inline">
            <el-card class="box-card">
                <div class="infinite-list" v-infinite-scroll="load">
                    <el-upload class="upload-demo" drag action="/action/upload"  :show-file-list="false" :data="upLoadData" :on-success='successHandle' multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                     <el-form-item label="库名称">
                            <el-input type="text" placeholder="请输入数据库名称" v-model="uploadform.filename"></el-input>
                    </el-form-item>
                        <el-form-item label="IO类型">
                          <el-select v-model="uploadform.type" placeholder="请选择IO类型">
                                <el-option v-for="item in dataType" :key="item.id" :label="item.value" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="库类别">
                            <el-select v-model="uploadform.sort" placeholder="请选择语言">
                                <el-option v-for="item in dataLangType" :key="item.id" :label="item.value" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                </div>
            </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData()">提交</el-button>
            <el-button @click="dataFormVisibleUpload = false">返回</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import axios from '@/plugins/axios' //在哪里用就在哪里引入
// require('@/mock/date_lib.js')
export default {
    data() {
        return {
            dataProcess: [],
            device_db: {},
            dataType: [{
                    "id": '1',
                    "value": '输入'
                },
                {
                    "id": '2',
                    "value": '输出'
                },
            ],
            dataLangType: [{
                    "id": '0',
                    "value": 'Python'
                },
                {
                    "id": '1',
                    "value": 'C/C++'
                },
                {
                    "id": '2',
                    "value": 'Java'
                }

            ],
            search: '',
             upLoadData:{
                "type":'2'
            },
            uploadform: {
                "oper": '2',
                "filename": '', //文件名
                'name':'',//库名称
                "type": '',
                "sort": ''
            },
            dialogFormVisible: false,
            dataFormVisibleUpload:false,//数据库上传
            modform: false,
            form: {
            },
            formLabelWidth: '120px'
        }
    },
    created: function () {
        ///action/data_lib  假数据接口
        axios.get('/action/getdata_status').then((res) => {
            this.dataProcess = res.data.getdata_info
        })
    },
    methods: {
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        formatType: function (row, column) {
            return row.type == '1' ? '输入' : row.type == '2' ? '输出' : '未知';
        },
        formatSort: function (row, column) {
            return row.sort == '0' ? 'Python' : row.sort == '1' ? 'C/C++' : 'Java';
        },
        indexMethod(index) {
            return index;
        },
        load() {
            this.count = 2;
        },
        upload() {
            this.dataFormVisibleUpload = true;
        },
           successHandle(response, file, fileList) {
            console.log('response: ', response);
            console.log('fileList: ', fileList);
            console.log('file: ', file);
            console.log(response.result);
            this.uploadform.filename = response.result


        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //离线浅红，在线浅蓝
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        Search(index, row) {
            console.log(index, row);
        },
        handleEdit(index, row) {
            this.form = {
                "oper":'3',
                "id": row.id,
                "filename": row.file_name,
                "type": row.type,
                "uptime": row.uptime,
                "sort": row.sort
            }
            this.dialogFormVisible = true;
        },
        handleState(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            let data={
                "id":row.id,
                "oper":'1'
            }
            axios.post('/action/getdata_oper',data).then((res)=>{
                if(res.data.code=='1'){
                    this.$message({
                          message: row.file_name+'删除成功',
                          type: 'success'
                     });
                axios.get('/action/getdata_status').then((res) => {
                this.dataProcess = res.data.getdata_info
                })
                }else{
                  this.$message.error('删除失败，请联系管理员！');
                }
            })
        },
        //添加数据库
        addData(){
            console.log("上传智能库的文件信息如下！");
            console.log(this.uploadform)
            axios.post('/action/getdata_oper', this.uploadform).then((res) => {
                if (res.data.code == '1') {
                      this.$message({
                          message:  this.uploadform.filename+'上传成功',
                          type: 'success'
                     });
                this.dataFormVisibleUpload = false;
                axios.get('/action/getdata_status').then((res) => {
                this.dataProcess = res.data.getdata_info
                })
                this.uploadform = {
                "oper": '2',
                "filename": '', //文件名
                "type": '',
                "sort": ''
            }
                }
                if (res.code == '0') {
                   this.$message.error('上传失败，请联系管理员！');
                }
            })
        },
        //修改数据库信息
        saveModform() {
            this.modform = false;
            console.log("修改信息如下!");
            console.log(this.form);
            axios.post('/action/getdata_oper',this.form).then((res)=>{
                if(res.data.code=='1'){
                    this.$message({
                          message: '修改成功',
                          type: 'success'
                     });
                    axios.get('/action/getdata_status').then((res) => {
                this.dataProcess = res.data.getdata_info
                })
                    this.dialogFormVisible = false;
                }else{
                    this.$message.error('修改失败，请联系管理员！');
                }
            })
        }

    }

}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.head {
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}

.button {
    position: relative;
    ;
    float: right;
}

.body {
    position: absolute;
    top: 23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
.el-select{
    width: 223px;
}
.el-form-item .el-input{
    width:300px;
}
.el-form-item .el-select{
    width:300px;
}
</style>
